<template>
	<view class="invite">
		<view class="advImg imgPublic">
		 	<image :src="datas.inviteInfo.share_img" mode="widthFix"></image>
			<view class="codeImg imgPublic">
				<image :src="qr_code" mode="widthFix"></image>
			</view>
		</view>
		<view class="recordBtn imgPublic" @tap.stop='lookRecord'>
			<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/inviteRecord.png" mode="widthFix"></image>
		</view>
		<view class="seat"></view>
		<view class="bottomBtn">
			<!-- <view class="inviteTxt" @tap.stop='copyTxt'>点击复制邀请语，免单更容易~</view> -->
			<view class="btns dFlex jBetween_aCenter">
				<button open-type="share" class="btnOne dFlex jCenter_aCenter green">
					<view class="btnIcon imgPublic">
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/wxIcon.png" mode="widthFix"></image>
					</view>
					<text>微信好友</text>
				</button>
				<view class="btnOne dFlex jCenter_aCenter orange" @tap.stop='savePoster'>
					<view class="btnIcon imgPublic">
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/saveIcon.png" mode="widthFix"></image>
					</view>
					<text>保存海报</text>
				</view> 
			</view>
		</view>
		<view class="zz dFlex jCenter_aCenter zz3">
			<canvas canvas-id="myCanvas" id="myCanvas" :style="'width:100%;height:'+cardHeight+'px;'"></canvas>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopId:'',
				invitedId:'',
				datas:{},
				qr_code:'',
				cardHeight:'',
				
				mobile:'',
			};
		},
		onLoad(e) {
			this.shopId = e.shopId;
			this.invitedId = e.invitedId;
			this.initData();
		},
		onShareAppMessage() {
			return {
				title:this.datas.inviteInfo.share_words,
				path:'/seller/shopDetail?id='+this.shopId+'&tjr_mobile='+this.mobile,
				imageUrl:this.datas.inviteInfo.cover_img,
				desc:this.datas.inviteInfo.share_words,
			}
		},
		onShareTimeline() {
			return {
				title:this.datas.inviteInfo.share_words,
				path:'/seller/shopDetail?id='+this.shopId+'&tjr_mobile='+this.mobile,
				imageUrl:this.datas.inviteInfo.cover_img,
				desc:this.datas.inviteInfo.share_words,
			}
		},
		methods:{
			initData(){
				this.tool.getData('/api/mall/getInviteInfo',{
					invite_id:this.invitedId,
					goods_id:this.shopId
				}).then(res=>{
					console.log(res);
					if(res){
						this.mobile = res.tjr_mobile;
						if(res.inviteInfo.status == '2'){
							uni.showToast({
								title:'该活动已失效',
								icon:'none'
							})
							return;
						}
						uni.getImageInfo({
							src:res.inviteInfo.share_img,
							success: (info) => {
								this.cardHeight = uni.getSystemInfoSync().windowWidth / (info.width / info.height);
							},
							fail:(err=>{
								console.log(err);
							})
						})
						this.datas = res;
						this.initCode();
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			initCode(){
				this.tool.getData('/api/sell/getGoodsQrcode',{
					goods_id:this.shopId,
					tjr_mobile:this.mobile,
				}).then(res=>{
					console.log(res);
					if(res){
						this.qr_code = res.qr_code;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 保存海报
			savePoster(){
				uni.showLoading({
					title:'制作中...'
				})
				var ctx = uni.createCanvasContext('myCanvas', this);
				let canvasWidth = uni.getSystemInfoSync().windowWidth;
				let canvasHeight = this.cardHeight;
				setTimeout(()=>{
					// 填充背景色，白色
					ctx.setFillStyle('#FFFFFF'); // 默认白色
					ctx.fillRect(0, 0,canvasWidth,canvasHeight); // fillRect(x,y,宽度，高度)
					uni.downloadFile({
						url:this.datas.inviteInfo.share_img,
						success: (shop) => {
							ctx.drawImage(shop.tempFilePath,0,0,canvasWidth,canvasHeight);
							this.tool.base64Save(this.qr_code).then(code=>{
								this.tool.circleImgOne(ctx,code,(canvasWidth - 104) / 2,canvasHeight * 0.65,52,1);
								// ctx.drawImage(code,(canvasWidth - 104) / 2, canvasHeight * 0.65,104,104);
								ctx.draw(true,()=>{
									setTimeout(()=>{
										uni.canvasToTempFilePath({ // 保存canvas为图片
											canvasId: 'myCanvas',
											quality: 1,
											width:canvasWidth,
											height:canvasHeight,
											destWidth:canvasWidth * 3,
											destHeight:canvasHeight * 3,
											complete: (res)=> {
												uni.getFileSystemManager().saveFile({
													tempFilePath:res.tempFilePath,
													success: (file) => {
														// this.card = file.savedFilePath;
														uni.saveImageToPhotosAlbum({
															filePath:file.savedFilePath,
															success: (save) => {
																uni.hideLoading();
																uni.showToast({
																	title:'图片已保存',
																	icon:"success"
																})
															},
															fail: (err) => {
																console.log(err);
																uni.hideLoading();
																uni.showToast({
																	title:'图片保存失败',
																	icon:"none"
																})
															}
														})
													},
													fail: (err) => {
														
													}
												})
											},
										},this) // 这里是新增的this，只有在微信小程序中需要加入，不然会报错
									},500)
								})
							}).catch(err=>{
								console.log(err);
							})
						},
						fail:(err)=>{
							uni.showToast({
								title:"图片下载失败",
								icon:"none"
							})
						},
						complete: () => {
							
						}
					})
				},500)
			},
			// 邀请记录
			lookRecord(){
				uni.navigateTo({
					url:'./record?id='+this.shopId+"&invitedId="+this.invitedId,
				})
			},
			// 复制邀请语
			copyTxt(){
				uni.navigateTo({
					url:'./inviteTxt'
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: white;
	}
	.zz3{
		left: -100%;
	}
	.invite{
		width: 100%;
		padding: 20rpx 30rpx 54rpx;
		box-sizing: border-box;
		.recordBtn{
			width: 144rpx;
			position: fixed;
			right: 0;
			top: 60rpx;
		}
		.bottomBtn{
			position: fixed;
			bottom: 0;
			left: 0;
			background: white;
			padding: 30rpx 30rpx 54rpx;
			width: 100%;
			box-sizing: border-box;
			.btns{
				width: 100%;
				.btnOne{
					width: 45%;
					padding: 22rpx 0;
					border-radius: 50px;
					color: white;
					.btnIcon{
						width: 36rpx;
						height: 36rpx;
						margin-right: 6rpx;
					}
				}
				.green{
					background: #43C93E;
				}
				.orange{
					background: #FC9700;
				}
			}
			.inviteTxt{
				width: 100%;
				text-align: center;
				color: #FC9700;
				border-radius: 50px;
				border: 1px solid #FC9700;
				padding: 24rpx 0;
				margin-bottom: 40rpx;
			}
		}
		.advImg{
			width: 100%;
			position: relative;
			.codeImg{
				width: 30%;
				position: absolute;
				padding: 3px;
				box-sizing: border-box;
				left: 35%;
				bottom: 192rpx;
				border-radius: 50%;
				background: white;
			}
		}
	}
</style>
